<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="~{segmentation/_right_bottom_header::_header_common(~{::title},~{::link},~{::style})}">
    <meta charset="utf-8">
    <title>上传</title>
    <link>
    <style type="text/css"></style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>上传</legend>
        </fieldset>
        <form class="layui-form" id="userFormAdd" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <!--<div class="layui-upload">-->
                    <!--<a class="layui-btn layui-btn-normal" id="userUpload">选择文件</a>-->
                    <button type="button" class="layui-btn layui-btn-normal" id="userUpload">选择文件</button>
                </label>
                <div class="layui-input-inline" style="width: 85%;" id="userUploadName">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="userUploadFilter">
                    <div class="layui-progress-bar layui-bg-orange" lay-percent=""></div>
                </div>
            </div>
            <div class="layui-form-item custom-text-align"
                 sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:upload')">
                <a class="layui-btn" lay-submit="" id="userFormUploadSubmit" lay-filter="userFormUploadSubmit">开始上传</a>
            </div>
        </form>
    </div>
</div>

<div th:replace="~{segmentation/_tail::_tail_common}"></div>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script th:inline="javascript">
    /*<![CDATA[*/
    layui.use(['upload', 'element'], function () {
        var upload = layui.upload,
            element = layui.element;

        //选完文件后不自动上传
        upload.render({
            elem: '#userUpload',
            url: '/other/file/info/upload?code=user',
            accept: "file",//指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
            exts: "xls|xlsx|doc|docx|ppt|pptx|txt",//允许上传文件后缀
            size: 1024 * 2,//设置文件最大可允许上传的大小，单位 KB。不支持ie8/9
            auto: false,//是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传
            multiple: true,//开启多文件上传
            number: 21,//设置同时可上传的文件数量，一般配合 multiple 参数出现。
            bindAction: '#userFormUploadSubmit',//指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn'
            data: {},
            //上传进度回调
            progress: function (num) {
                var percent = num + "%";
                console.log(percent);
                element.progress('userUploadFilter', percent)
            },
            //选择文件后的回调函数。返回一个object参数,如果是单文件上传不建议用这个，因为单文件会自动把上传文件名显示在选择文件
            choose: function (obj) {
                $("#userUploadName").html("");
                obj.preview(function (index, file, result) {
                    console.log("choose:" + file);
                    var html = "<span class='layui-upload-choose'>" + file.name + "</span>";
                    $("#userUploadName").append(html);
                });
            },
            //文件提交上传前的回调。返回一个object参数（同上）
            before: function (obj) {
                console.log("before:" + obj);
            },
            //执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）
            done: function (res, index, upload) {
                console.log("done:" + res);
            },
            //执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）
            error: function (index, upload) {
                console.log("done:" + index);
            },
        });
    });
    /*]]>*/
</script>

</body>
</html>